import { View } from "@tarojs/components";
import React, { useState } from "react";
import styles from "./index.module.scss";
import { Step, Steps } from "@nutui/nutui-react-taro";

function Progress() {
  const [stepList, setStepList] = useState<any[]>([
    {
      id: 1,
      name: "白白白",
      status: "发起申诉",
      date: "09-23 12:09:08",
      desc: "您的订单已经打包完成，商品已发出",
    },
    {
      id: 2,
      name: "祁祁祁",
      status: "审核通过",
      date: "09-23 12:09:08",
      desc: "您的订单已经打包完成，商品已发出",
    },
    {
      id: 3,
      name: "白白白3",
      status: "审核驳回",
      date: "09-23 12:09:08",
      desc: "您的订单已经打包完成，商品已发出",
    },
  ]);

  return (
    <View className={styles["progress-wrapper"]}>
      <View className={styles["title"]}>申诉进程</View>
      <View className={styles["steps-wrapper"]} style={{ height: "300px" }}>
        <Steps direction="vertical">
          {stepList.map((item, index) => (
            <Step
              key={index}
              value={item.id}
              title={`${item.name}${item.status}`}
              content="您的订单已经打包完成，商品已发出"
              description={
                <>
                  <p>{item.desc}</p>
                </>
              }
            ></Step>
          ))}

          {/* <Step
            value={3}
            title="未开始"
            description={
              <>
                <p>收货地址为：</p>
                <p>北京市经济技术开发区科创十一街18号院京东大厦</p>
              </>
            }
          >
            3
          </Step> */}
        </Steps>
      </View>
    </View>
  );
}

export default Progress;
